@import '~styles/config.scss';


.AppListBox {
    padding-bottom: 10px;

    .ul {


        .hh {
            position   : sticky;
            top        : 0px;
            z-index    : 1;
            padding    : 14px 0px;
            background : $--background-color-base;
            font-weight: 340;
            font-size  : 16px;
            color      : $--color-text-regular;
        }

        .mm {
            margin-left: -14px;
            margin-top : -14px;
            display    : flex;
            flex-wrap  : wrap;
        }

        .li {
            width       : 360px;
            box-sizing  : border-box;
            padding-top : 14px;
            padding-left: 14px;
            position    : relative;

            .border {
                cursor: pointer;
                // border-radius: 10px;
                padding         : 10px;
                background-color: $--background-color-base;
                background      : #fff;
                display         : flex;
                transition      : all .5s;
                border          : 1px solid #fff;

            }



            // &.true {
            //     border: 2px solid #f00;
            // }

            .icon {
                width           : 60px;
                height          : 60px;
                // border-radius: 4px;
                flex            : none;
                border          : 2px solid #fff;
                box-sizing      : border-box;
            }

            .text {
                padding-left   : 10px;
                // padding-left: 14px;
                flex           : auto;
                // width:100%;
            }

            .name {
                line-height   : 34px;
                color         : $--color-text-primary;
                font-size     : 18px;
                // font-weight: bold;
                position      : relative;

            }

            .subname {
                color             : $--color-text-secondary;
                font-size         : 12px;
                line-height       : 26px;
                display           : -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow          : hidden;
                height            : 26px;
                text-align        : justify;

            }


            &.false {
                // .icon {
                //     opacity: 0.5;
                // }

                &::after {
                    content   : "";
                    position  : absolute;
                    top       : 0px;
                    left      : 0px;
                    background: rgba(255, 255, 255, 0.2);
                    z-index   : 1;
                    width     : 100%;
                    height    : 100%;
                    cursor    : not-allowed
                }
                .text{
                    opacity: 0.7;
                }

            }

            &.true {
                .border {


                    &:hover {
                        box-shadow   : 0px 0px 10px rgba($color: #000000, $alpha: 0.05);
                        // transform : translateY(-2px);
                        border       : 1px solid $--color-primary;
                        background   : $--background-color-primary-light;

                        .icon {
                            box-shadow: 0px 0px 4px rgba($color: #000000, $alpha: 0.05);
                        }
                    }
                }
            }
        }
    }

    &.default {}

    &.mini {
        .ul {
            .li {
                width: 190px;

                .border {
                    padding: 5px;
                    display: flex;
                }

                .icon {
                    width : 30px;
                    height: 30px;
                }

                .name {
                    padding           : 0px 0px 0px 5px;
                    font-size         : 12px;
                    margin-bottom     : 0;
                    line-height       : 30px;
                    display           : -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow          : hidden;

                    &::before {
                        display: none;
                    }
                }

                .subname {
                    display: none;
                }
            }
        }
    }
}